<template>
  <div>
    <ul>
      <li v-for="(data,i) in nav"
          :key="i">
        <router-link :to="data.to">{{data.mes}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
    }
  },
  computed: {
    nav () {
      return [{
        to: '/echarts',
        mes: 'echarts图表'
      }, {
        to: '/luckdraw',
        mes: '九宫格抽奖'
      }, {
        to: '/table',
        mes: '数据报表'
      }, {
        to: '/picture',
        mes: '制作图片'
      }, {
        to: '/drawingBoard',
        mes: '画板签名'
      }, {
        to: '/upload',
        mes: '文件上传'
      }, {
        to: '/banner',
        mes: 'banner'
      }, {
        to: '/swiper',
        mes: 'swiper'
      }, {
        to: '/keyCode',
        mes: 'keyCode'
      }]
    }
  }
}
</script>

<style lang="less" scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  padding: 0;
}
li {
  display: block;
  margin: 0 10px;
  line-height: 26px;
  list-style: none
}
a {
  color: #42b983;
  font-size: 22px;
}
</style>
